<template>
  <div class="hello">
    <h1 v-if="show">{{ msg }}</h1>
    <h2>Essential Links</h2>
    <h1 v-on:click="changes" data-index="2">wqx nmb</h1>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul >
      
      <li v-for="(items, index) in item">
      {{ items.title }}
      </li>
    </ul>
  </div>
  
</template>

<script>
import Wqx from "./wqx"
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      item : [],
      show : true,
    }
  },
  mounted: function (){
      this.$http.get('https://cnodejs.org/api/v1/topics').then(function(response){
        console.log(response)
          this.item = response.body.data;
          console.log(this.item);

      },function(response){
        console.log(response)
      });
  },
  methods:{
      changes:function(event,obj){
        console.log(event.attribute)
        this.show = !this.show;
      }
  },
 
  
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
